<template lang="pug">
    yd-layout#app
        router-view
        yd-tabbar(slot='tabbar', color='#000', fontsize='.2rem')
          yd-tabbar-item(title='HOME PAGE', link='/', :active="$route.path=='/'")
              span(slot='icon') 首页
          yd-tabbar-item(title='APPOINTMENT',link='/appointment', :active="$route.path.startsWith('/appointment')")
              span(slot='icon') 预约
          yd-tabbar-item(title='ORDER',link='/order', :active="$route.path.startsWith('/order')")
              span(slot='icon') 订单
          yd-tabbar-item(title='PERSONAL',link='/personal', :active="$route.path.startsWith('/personal')")
              span(slot='icon') 个人
</template>

<script>

export default {
  name: 'app',
}
</script>
<style lang="stylus">
  .yd-tabbar {
      padding: 0;
      .yd-tabbar-item{
        height: 1.2rem;
      }
      .yd-tabbar-item{
        &.yd-tabbar-active{
          color: #FFF;
          background-image: repeating-linear-gradient(to bottom,#EEE,#666);
        }
        .yd-tabbar-icon{
          span{
            text-align: center;
            text-indent: .2rem;
            letter-spacing: .2rem;
          }
        }
      }        
  }
</style>
